<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪网站-首页</title>
  <!-- 引入swiper文件 -->
  <link rel="stylesheet" href="../lib/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="../CSS/首页.css">
  <style type="text/css">
    .swiper {
      /* --swiper-theme-color: #ff6600;设置Swiper风格 */
      --swiper-navigation-color: #dae9e8;
      /* 单独设置按钮颜色 */
      --swiper-navigation-size: 100px;
      /* 设置按钮大小 */
    }
    a{
      color: #000;
      text-decoration: none;
    }
  </style>
</head>

<body>
  
  <h1>
    首页
    <p class="off "><a href="./登录.html">您好, 请登录</a></p>
    <p class="on active">您好, <span>leon</span>
      <button class="btn1"><a href="./个人中心.html">个人中心</a></button>
      <button class="btn2">退出登录</button>
    </p>
      
  </h1>
  <!-- 购买商品 -->
  <div style="font-size: 100px; font-weight: 700;text-align: center;margin:8px;"><a href="./购物车.html">购买商品</a></div>
  <script src="../axios.min.js"></script>
  <script src="../http.js"></script>
  <script>
    /*
      首页需要校验用户是否已经登录
        - 如果已经登录过则需要保存登录状态
        - 但是http是一个请求响应协议,也是一个无状态协议
          + 无状态协议
            - 对于服务器来说,同一个接口的前一次和后一次请求;服务器无法识别是否是同一个人
        - 可以使用token技术解决
          + token: 就是后端返回的具有特殊含义的一段字符串
            - 相当于 令牌
        - 在登录及后续校验用户状态中使用token
          + 当请求登录接口,登录成功后则在响应数据中会将token数据返回
          + 前端接收到token数据则将其存储到本地
          + 后续如果请求需要校验身份的接口 则将token携带上
            - 后端会进行校验(如果token没问题则正常获取数据)
    */
    /* 
      校验用户是否已经登录
        - 请求一个用户登录后才可以使用的接口
          + 获取用户详情接口
            - 地址: http://localhost:8888/users/info
            - 请求方式: get
            - 请求携带的数据: token(请求头),id(用户id)
    */
    let peles = document.querySelectorAll('p');
    let btn2 = document.querySelector('.btn2');

    async function fn() {
      // 调用isLogin方法
      let r = await isLogin();
      // console.log(r);
      if (r.status != 1) { // 用户未登录
        peles[0].classList.add('active');
        peles[1].classList.remove('active');
      } else {
        // 用户已登录
        peles[0].classList.remove('active');
        peles[1].classList.add('active');
        peles[1].children[0].innerHTML = r.info.nickname;
      }
    }
    fn();
    btn2.addEventListener('click', async function (e) {
      e.preventDefault();
      const userId = localStorage.getItem('uid');
      // console.log(userId);
      let res = await http.get('/users/logout', { params: { id: userId } })
      alert(res.data.message);
      location.reload()
    })
  </script>
  <!-- 下面是轮播图功能 -->
  <div class="relay">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../img/img1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/img2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/img3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/img4.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../img/img5.jpg" alt=""></div>
      </div>
      <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <!-- 引入swiper的js部分 -->
  <!-- 首页轮播图功能 -->
  <script src="../lib/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
      autoplay: {
        delay: 1000,//1秒切换一次
      },
      autoplay: {
        pauseOnMouseEnter: true,
      },//鼠标经过停止自动播放
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>